<template>
	<view class="content-auto">
		<view class="content-list">
			<view class="c_item_top" v-if="orderDetail">
				<view class="c_item_s">
					<view class="sty_title">
						<view class="workNo">
							{{orderDetail.workNo}}
							<image class="btn_c" @click="copy(orderDetail.workNo)" src="/static/copy.svg" mode="">
							</image>
						</view>
						<span class="status"
							:class="orderDetail.status==1||orderDetail.status==2?'status_123':orderDetail.status==3?'status_4':orderDetail.status==5?'status_6':''">{{orderDetail.status==1?'待派单':orderDetail.status==2?'待网点确认':orderDetail.status==3?'处理中':orderDetail.status==4?'已完成':'已取消'}}</span>

					</view>
					<span class="module">{{orderDetail.module}}</span>

					<view class="tip_title">
						<view class="title_span">
							<span class="tip">报单时间：</span><span>{{orderDetail.createTime}}</span>
						</view>
						<view class="title_span">
							<span class="tip">质保状态：</span><span>{{orderDetail.overinsured?'在保':'过保'}}</span>
						</view>
						<view class="title_span">
							<span class="tip">工单质保：</span><span>{{orderDetail.warrantyDay}}天</span>
						</view>
					</view>
				</view>
				<view class="title_top_text">
					<view class=" top_label">
						报单商品
					</view>
				</view>
			</view>
			<view class="c_item">
				<view class="log_list">
					<view class="log_item" v-for="(item,index) in goodsDetail?.rows" :key="index">
						<view class="left_img">
							<image v-if="item.goodsImage" @click="lookImg([item.goodsImage])" class="img" lazy-load
								:src="item.goodsImage" mode="aspectFill"></image>
							<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
						</view>
						<view class="right_text">
							<view class="brands">
								{{'【'+item.goodsBrand+'】'}}
								{{item.goodsType}}
							</view>
							<view class="top_brand_type">
								{{item.goodsName}}
							</view>
							<view class="ms">
								<p class="tip">型号：</p>
								<p>{{item.goodsModel}}</p>
							</view>
							<view class="ms">
								<p class="tip">规格：</p>
								<p>{{item.goodsSpecName}}</p>
							</view>
							<view class="ms">
								<p class="tip">一物一码：</p>
								<p>{{item.code}}</p>
								<view class="num_b" @click="showGoodsCode(item)" v-if="item.qty!>1">

									<span class="num_text">{{item.qty>99?'99+':item.qty}}</span>
									<uni-icons type="right" size="14"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn_logout">
				<button type="primary" size="small" @click="goPage" class="onlogout">
					<span>再次申请</span>
				</button>
			</view>
		</view>
		<!-- 商品一物一码列表弹窗 -->
		<uni-popup ref="popupGoodsCode" type="bottom">
			<view class="popup_list" v-if="goodsCodeDetail">
				<view class="text_top_popup">
					<span>当前商品一物一码列表（{{goodsCodeDetail.qty}}）</span><uni-icons color="#aaa"
						@click="popupGoodsCode.close()" size="22" type="closeempty"></uni-icons>
				</view>
				<view class="height_list">
					<view class="left_img">
						<image v-if="goodsCodeDetail.goodsImage" @click="lookImg([goodsCodeDetail.goodsImage])"
							class="img" lazy-load :src="goodsCodeDetail.goodsImage" mode="aspectFill"></image>
						<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
					</view>
					<view class="right_text">
						<view class="brands">
							{{'【'+goodsCodeDetail.goodsBrand+'】'}}
							{{goodsCodeDetail.goodsType}}
						</view>
						<view class="top_brand_type">
							{{goodsCodeDetail.goodsName}}
						</view>
						<view class="ms">
							<p class="tip">型号：</p>
							<p>{{goodsCodeDetail.goodsModel}}</p>
						</view>
						<view class="ms">
							<p class="tip">规格：</p>
							<p>{{goodsCodeDetail.goodsSpecName}}</p>
						</view>
					</view>
				</view>
				<view class="list_ovh">
					<uni-list-item v-for="(item,index) in goodsCodeList" clickable :key="index">
						<template v-slot:body>
							<view class="way_name" @click="copy(item.code)">
								<span><span>（{{index+1}}）</span>{{item.code}}</span>
								<image class="img" src="/static/copy.svg" mode="aspectFill"></image>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref, watch
	} from "vue";
	import store from '@/store/index.js'
	import {
		onLoad, onReachBottom, onUnload
	} from '@dcloudio/uni-app'
	import apiOrder from "@/util/api/order.js"
	const orderDetail = ref(null)//详情信息
	const popupGoodsCode = ref()//商品编码展示
	const goodsCodeList = ref()//商品编码列表
	const goodsCodeDetail = ref(null)//编码商品信息
	const goodsDetail = ref({
		total: 0,
		rows: []
	})//商品详情
	const workId = ref('')//工单id
	onUnload(() => {
		uni.hideLoading()
	})
	const page = ref(1)
	onLoad((e) => {
		workId.value = e.id
		getHistoryOrderDetail(e.id)
		getHistoryOrderGoodsDetail()
		uni.pageScrollTo({
			scrollTop: 0
		})
	})
	// 商品一物一码展示
	const showGoodsCode = async (item) => {
		uni.showLoading({
			title: "加载中..."
		})
		goodsCodeDetail.value = item
		await apiOrder.getUserHistoryOorderGoodsCodes(item.id).then(res => {
			if (res.code == 20000) {
				goodsCodeList.value = res.data.row
			}
		})
		uni.hideLoading()
		popupGoodsCode.value.open()
	}
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
	// 获取工单详情
	const getHistoryOrderDetail = async (id) => {
		uni.showLoading({
			title: "加载中..."
		})
		await apiOrder.getUserHistoryOrderDetail(id).then(res => {
			if (res.code == 20000) {
				orderDetail.value = res.data.row
			}
		})
		uni.hideLoading()
	}

	//获取商品信息
	const getHistoryOrderGoodsDetail = async () => {
		let data = {
			"limit": 0,
			"page": page.value
		}
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiOrder.getUserHistoryOrdeGoods(data, workId.value).then(res => {
			if (res.code == 20000) {
				goodsDetail.value.rows = [...goodsDetail.value.rows, ...res.data.rows]
				goodsDetail.value.total = res.data.total
			}
		})
		uni.hideLoading()
	}
	// 预览图片
	const lookImg = (urls) => {
		uni.previewImage({
			urls: urls,
		})
	}
	// 加载更多
	onReachBottom(() => {
		if (goodsDetail.value.rows.length < goodsDetail.value.total) {
			page.value += 1
			getHistoryOrderGoodsDetail()
		}
	})
	const goPage = () => {
		store.commit('setorderGoodsTypes', [])
		store.commit('setchackFaultList', [])
		store.commit('setchackFaultItem', { id: null })
		store.commit('setcheckBrandItem', { id: null })
		store.commit('setcheckClassifyItem', { id: null })
		store.commit('setappointmentTime', null)
		store.commit('setUserOrder', {
			"address": "", //客户详细地址
			"area": "", //地址-县/区
			"city": "", //地址-市
			"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
			"name": "", //客户姓名
			"otherPhone": "", //其他电话
			"phone": "", //客户手机号
			"province": "", //地址-省
			"town": "", //地址-镇
			"userId": null
		})
		uni.navigateTo({
			url: '/pages/home/add?id=' + orderDetail.value.id
		})
	}
</script>

<style lang="scss" scoped>
	.content-auto {
		// height: 100vh;
		background-color: #f6f7fa;

		.content-list {
			background-color: #f6f7fa;

			.c_item_top {
				background-color: #f6f7fa;
				position: fixed;
				z-index: 2;
				left: 0;
				width: 100%;

				.c_item_s {
					background-color: #fff;
					margin: 24rpx;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;

					.sty_title {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.status {
							font-size: 28rpx;
							background-color: #ecf5ff;
							color: #007cff;
							padding: 8rpx;
							border-radius: 8rpx;
						}

						.status_123 {
							color: #e6a23c;
							background-color: #fdf6ec;

						}

						.status_4 {
							color: #00c0c0;
							background-color: #ebf6f6;

						}

						.status_6 {
							color: #909399;
							background-color: #f4f4f5;

						}

						.workNo {
							font-size: 28rpx;
							display: flex;
							align-items: center;

							.btn_c {
								height: 30rpx;
								line-height: 30rpx;
								width: 24rpx;
								margin-left: 24rpx;
							}
						}

					}

					.module {
						padding: 12rpx 0 16rpx;
						font-size: 28rpx;
						// color: #666;
						font-weight: bold;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
					}

					.level {
						font-size: 24rpx;
						color: #666;
						margin: 0 24rpx;
					}

					.tip_title {
						font-size: 24rpx;

						.title_span {
							margin-bottom: 12rpx;
							// color: #666;

							.tip {
								padding-bottom: 12rpx;
								color: #777;
								font-size: 24rpx;
							}
						}
					}
				}

				.title_top_text {
					background-color: #fff;
					margin: 0 24rpx 0;
					padding: 24rpx 20rpx;
					border-radius: 20rpx 20rpx 0 0;

					.top_label {
						border-left: 6rpx solid #007cff;
						padding-left: 12rpx;
						font-size: 28rpx;
						font-weight: bold;
					}
				}

			}

			.c_item {
				padding-top: 434rpx;
				padding-bottom: 200rpx;

				.log_list {
					background-color: #fff;
					margin: 0 24rpx 0;
					padding: 14rpx 20rpx 1rpx;
					border-radius: 0 0 20rpx 20rpx;

					.log_item {
						background-color: #f6f7fa;
						padding: 20rpx 24rpx 20rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;

						.left_img {
							width: 180rpx;
							height: 180rpx;
							border: 1px solid #eee;
							border-radius: 10rpx;
							margin: 0 20rpx 0 0;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
						}

						.right_text {
							font-size: 24rpx;
							margin-right: 12rpx;
							flex: 1;
							position: relative;

							.brands {
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
								font-weight: bold;
								font-size: 28rpx;
								margin: 0 0 10rpx;
							}

							.top_brand_type {
								font-size: 28rpx;
								word-wrap: break-word;
								word-break: break-all;
								margin: 10rpx;
								color: #000;
								font-weight: bold;
							}

							.ms {
								display: flex;
								align-items: center;
								width: 100%;
								word-wrap: break-word;
								word-break: break-all;
								margin: 8rpx;

								.num_b {
									position: absolute;
									right: -30rpx;

									.num_text {
										background-color: #007cff;
										font-size: 22rpx;
										border-radius: 4rpx;
										padding: 0 10rpx;
										color: #fff;
									}
								}

								.tip {
									color: #777;
								}
							}
						}
					}
				}
			}

			.btn_logout {
				position: fixed;
				bottom: 0rpx;
				margin: 0 auto;
				width: 100%;
				z-index: 3;
				background-color: #fff;
				padding: 30rpx 0;

				:deep(button:after) {
					border: none !important;
				}

				.onlogout {
					font-size: 28rpx;
					padding: 0rpx 20rpx;
					margin: 0 200rpx;
					height: 80rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #007cff;
				}
			}
		}

		.popup_list {
			padding: 0 24rpx;
			height: 70vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.height_list {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.left_img {
					width: 180rpx;
					height: 180rpx;
					border: 1px solid #eee;
					border-radius: 10rpx;
					margin: 0 20rpx 0 0;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.right_text {
					font-size: 24rpx;
					margin-right: 12rpx;
					flex: 1;
					position: relative;

					.brands {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						font-weight: bold;
						font-size: 28rpx;
						margin: 0 0 10rpx;

					}

					.top_brand_type {
						font-size: 28rpx;
						word-wrap: break-word;
						word-break: break-all;
						margin: 10rpx;
						color: #000;
						font-weight: bold;
					}

					.ms {
						display: flex;
						align-items: center;
						width: 100%;
						word-wrap: break-word;
						word-break: break-all;
						margin: 8rpx;

						.tip {
							color: #777;
						}
					}
				}
			}

			.list_ovh {
				height: 600rpx;
				overflow: auto;

				.way_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					min-width: 70%;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>